<template>
	<div ref="chartDom" style="width: 100%; height: 100%;"></div>
</template>

<script setup>
import { ref, defineProps, watch, nextTick, onMounted, onUnmounted } from 'vue';
import * as Echarts from 'echarts';

const chartDom = ref(null);
const myChart = ref(null);

const props = defineProps({
	data: {
		type: Number,
		default: 0
	}
});

const options = ref({
	title: {
		text: 'GPU 占用率',
		left: 'center',
		textStyle: {
			fontSize: 36,
			color: '#fff'
		},
		top: '5%'
	},
	series: [
		{
			type: 'gauge',
			startAngle: 180,
			endAngle: 0,
			min: 0,
			max: 100,
			splitNumber: 10,
			itemStyle: {
				color: '#58D9F9',
				shadowColor: 'rgba(0,138,255,0.45)',
				shadowBlur: 10,
				shadowOffsetX: 2,
				shadowOffsetY: 2
			},
			progress: {
				show: true,
				roundCap: true,
				width: 18
			},
			pointer: {
				icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
				length: '75%',
				width: 16,
				offsetCenter: [0, '5%']
			},
			axisLine: {
				roundCap: true,
				lineStyle: {
					width: 18
				}
			},
			axisTick: {
				splitNumber: 2,
				lineStyle: {
					width: 2,
					color: '#999'
				}
			},
			splitLine: {
				length: 12,
				lineStyle: {
					width: 3,
					color: '#999'
				}
			},
			axisLabel: {
				distance: 30,
				color: '#999',
				fontSize: 20
			},
			title: {
				show: false
			},
			detail: {
				backgroundColor: '#fff',
				borderColor: '#999',
				borderWidth: 2,
				width: '60%',
				lineHeight: 70,
				height: 60,
				borderRadius: 8,
				offsetCenter: [0, '35%'],
				valueAnimation: true,
				formatter: function (value) {
					return '{value|' + value.toFixed(0) + '}{unit|%}';
				},
				rich: {
					value: {
						fontSize: 50,
						fontWeight: 'bolder',
						color: '#777'
					},
					unit: {
						fontSize: 20,
						color: '#999',
						padding: [0, 0, -20, 10]
					}
				}
			},
			data: [
				{
					value: 0
				}
			]
		}
	]
});

const resize = () => {
	if (myChart.value) {
		myChart.value.resize();
	}
};

let pendingData = null;

watch(
	() => props.data,
	(newValue) => {
		pendingData = newValue;
		if (myChart.value) {
			updateChart();
		}
	},
	{ immediate: true }
);

onMounted(() => {
	nextTick(() => {
		try {
			myChart.value = Echarts.init(chartDom.value);
			myChart.value.setOption(options.value);
			if (pendingData !== null) {
				updateChart(pendingData);
				pendingData = null;
			}
		} catch (error) {
			console.error('ECharts 初始化失败:', error);
		}
	});
	window.addEventListener('resize', resize);
});

function updateChart(value) {
	options.value.series[0].data[0].value = value;
	myChart.value.setOption(options.value);
}

onUnmounted(() => {
	window.removeEventListener('resize', resize);
	if (myChart.value) {
		myChart.value.dispose();
	}
});
</script>

<style scoped lang="scss">
/* 可以在这里添加样式 */
</style>